
import React,{Component} from 'react'
import {
    BabyDetailContainer,
    BabyDetailContent,
    BabyDetailHeader,
    BabyDetailTitle,
    BabyDetailWrapper
} from './BabyStyleComponents'
import {connect}  from 'react-redux'
import actionCreators from '../../../store/home/actionCreator'
import { bindActionCreators } from 'redux'
import BScroll from 'better-scroll' 
const Item=(props)=>{
    return (
                <li>
                     <a href="#">
                           <div className="item-img">
                                  <img src={props.image}/>
                            </div>
                            <div className="title">
                                 <i>{props.auth_o_retail_o_yqt}</i>
                                 <span>{props.medium_name}</span>
                            </div>
                            <div className="price">
                                <span className="now-price"><i>￥</i><span>{props.discounted_price}</span></span>
                                <span className="before-price"><i>￥</i><s>{props.original_price}</s></span>
                            </div>
                            <div className="tips">
                                <span>{props.buyer_numer}</span>
                            </div>
                            </a>
                        </li>
    )

        
}
class BabyDetail extends Component{
    componentDidMount(){
         this.props.getBabyDetailLists()
         this.bscroll = new BScroll(this.Babywarp,{click:true,mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
           }
        })
    }
renderItem(){
    return this.props.baby_detail_list && this.props.baby_detail_list.map(item=><Item {...item} key={item.item_id}></Item>)
}
    render(){
        return(
            <BabyDetailContainer ref={el=>this.Babywarp =el}>
              <BabyDetailWrapper>
                <BabyDetailHeader>
                    <img src="http://mp5.jmstatic.com/jmstore/image/000/005/5718_std/5d30387c509e7_640_350.jpg?imageView2/2/q/75/1563441516387"/>
                </BabyDetailHeader>
                <BabyDetailTitle>
                    <em></em>
                    <span>帮宝适品牌专场</span>
                    <em></em>
                </BabyDetailTitle>
                <BabyDetailContent>
                    <ul>
                        {this.renderItem()}
                    </ul>
                </BabyDetailContent>
            </BabyDetailWrapper>
        </BabyDetailContainer>
        )
    }
}
export default connect(state=>state.home,dispatch=>bindActionCreators(actionCreators,dispatch))(BabyDetail)